<script setup>
import {
  applyJobApi,
  confirmInterviewApi,
  fillInInterviewInfoApi,
  getApplyJobStatusApi,
  getJobListApi,
  isApplyJobApi
} from '@/api/job'
import Form from '@/components/User/Form.vue'
import Pagization from '@/components/common/pagization.vue'
import Table from '@/components/Job/table.vue'
import { showStatusMessage } from '@/utils/common/showMessage'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import FormJob from '@/components/Job/form.vue'
import { dayFormat } from '@/utils/common/dayjs'

const router = useRouter()
const userStore = useUserStore()
// 表单数据
const formData = ref({
  enterpriseName: '',
  jobName: '',
  status: ''
})
const formModel = [
  {
    prop: 'enterpriseName',
    label: '企业名称',
    type: 'input'
  },
  {
    prop: 'jobName',
    label: '职位名称',
    type: 'input'
  }
]
const btnOpt = [
  {
    name: '查询',
    btnType: '',
    prop: 'query'
  },
  {
    name: '重置',
    btnType: 'info',
    prop: 'reset'
  }
]

const formRef = ref(null)
const pagizationToatl = ref(null)

/**
 * 获取表格数据
 */
async function getTableData(data) {
  const res = await getApplyJobStatusApi({
    ...data,
    studentAccount: userStore.userInfo.account
  })
  tableData.value = res.data.map((item) => {
    return {
      ...item,
      jobLocation: item.jobLocation ? JSON.parse(item.jobLocation).join('') : ''
    }
  })
  console.log(tableData.value)

  pagizationToatl.value = res.total
}
getTableData()
const pagizationRef = ref(null)
const selectFormRef = ref(null)
/**
 * 点击重置按钮
 */
function reset() {
  getTableData()
  pagizationRef.value.reset()
  selectFormRef.value.reset()
}

/**
 * 表单按钮点击事件
 * @param type 操作类型
 * @param data 表单数据
 */
function handleForm(type, data) {
  // console.log(type, data)
  switch (type) {
    case 'query':
      query(data)
      break
    case 'add':
      addForm()
      break
    case 'output':
      exportToExcel()
      break
    case 'reset':
      reset(data)
      break
    case 'import':
      handleUpload(data)
      break
    case 'submit':
      handleSubmit(data)
      break
    default:
      break
  }
}

/**
 * 表单查询事件
 * @param {Object} data 查询条件
 */
const queryData = ref(null)
async function query(data) {
  queryData.value = data
  const res = await getTableData(data)
  console.log(res)
  showStatusMessage(res)
  tableData.value = res.data
  pagizationToatl.value = res.total
}

// 列表数据
const tableData = ref([])
const columns = [
  {
    prop: 'enterpriseName',
    label: '企业名称'
  },
  {
    prop: 'jobName',
    label: '职位名称'
  },
  {
    prop: 'salary',
    label: '薪资'
  },
  {
    prop: 'jobName',
    label: '职位名称'
  },
  {
    prop: 'jobLocation',
    label: '地址'
  },
  {
    prop: 'jobDetailLocation',
    label: '详细地址'
  }
]
const options = [
  {
    label: '职位详情',
    type: 'warning',
    prop: 'detail'
  },
  {
    label: '查看进程',
    type: 'primary',
    prop: 'process'
  }
]

/**
 * 表格的操作事件
 * @param {Object} data  操作行的数据
 * @param {String} type 操作类型-’edit’-‘delete’
 */
function handleTable(data, type) {
  switch (type) {
    case 'process':
      handletTableProcess(data)
      break
    case 'detail':
      handletTableDetail(data)
      break
    default:
      break
  }
}
// 分页器条数发生变化
function handleSizeChange(val) {
  const data = selectFormRef.value.getValue()
  console.log('条数发生变化')
  getTableData({ size: val, ...data, status: 2 })
  pagizationRef.value.reset()
}
// 分页器页数发生变化
function handleCurrentChange(page, size) {
  const data = selectFormRef.value.getValue()
  console.log('页数发生变化')
  getTableData({ page, size, ...data, status: 2 })
}

// 控制抽屉显示
const dialog = ref(false)
// 抽屉数据
const dialogData = ref({})

function handletTableDetail(value) {
  router.push({
    path: '/weeklyJournalDetail',
    state: {
      data: JSON.stringify(value),
      type: 'jobDetail'
    }
  })
}
// ******************************进程管理事件***********************************

const processActive = ref(1)
// 进程管理
const dialogProcess = ref(false)
const processData = ref(null)
function handletTableProcess(data) {
  if (data.status == 2 || data.status == 3 || data.status == 4) {
    processActive.value = 2
  }
  if (data.status == 5 || data.status == 6 || data.status == 7) {
    processActive.value = 3
  }
  processData.value = data
  console.log(processData.value)

  dialogProcess.value = true
}
function handleDrawerProcessClose() {
  processActive.value = 1
  dialogProcess.value = false
}
// 面试
const interviewRef = ref(null)
function interviewCancel() {
  interviewRef.value.resetFields()
}
// 确认面试信息

async function interviewConfirm() {
  const res = await confirmInterviewApi({
    status: 4,
    studentAccount: processData.value.studentAccount,
    exterpriseAccount: processData.value.exterpriseAccount,
    jobName: processData.value.jobName,
    // 学生状态追踪信息
    enterpriseName: processData.value.enterpriseName,
    interviewTime: processData.value.interviewTime,
    interviewer: processData.value.interviewer,
    name: processData.value.name,
    interviewresult: 0,
    interviewDetailPlace: processData.value.interviewDetailPlace,
    interviewPlace: processData.value.interviewPlace
  })
  handleDrawerProcessClose()

  showStatusMessage(res)
  getTableData()
}
</script>

<template>
  <div class="license-wrapper">
    <div class="user-content">
      <Form
        :data="formData"
        :formOpt="formModel"
        :btnOpt="btnOpt"
        @handleForm="handleForm"
        ref="selectFormRef"
      ></Form>
      <!-- 表格 -->
      <Table
        :tableData="tableData"
        :columns="columns"
        :options="options"
        @handleTable="handleTable"
      >
        <template #firstColumn>
          <el-table-column type="index" label="编号" width="100" align="center" />
        </template>
      </Table>
      <!-- 分页 -->
      <Pagization
        ref="pagizationRef"
        :total="pagizationToatl"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></Pagization>
      <!-- 抽屉 -->
      <el-drawer v-model="dialog" direction="rtl" class="demo-drawer">
        <template #header>
          <div class="drawer-title" style="font-weight: 900; font-size: 25px; letter-spacing: 15px">
            职位详情
          </div>
        </template>
        <div class="drawer-content">
          <div class="content-list"><span>公司名称：</span>{{ dialogData.enterpriseName }}</div>
          <div class="content-list"><span>岗位薪资：</span>{{ dialogData.salary }}</div>
          <div class="content-list"><span>职位名称：</span>{{ dialogData.jobName }}</div>
          <div class="content-list"><span>职位描述：</span>{{ dialogData.jobDesc }}</div>
          <div class="content-list"><span>任职要求：</span>{{ dialogData.jobRequire }}</div>
          <div class="content-list"><span>地址：</span>{{ dialogData.jobLocation.join('') }}</div>
          <div class="content-list"><span>详细地址：</span>{{ dialogData.jobDetailLocation }}</div>
          <div class="content-list"><span>联系电话：</span>{{ dialogData.phone }}</div>
        </div>
      </el-drawer>
      <!-- 进程管理 -->
      <el-drawer
        v-model="dialogProcess"
        direction="rtl"
        class="demo-drawer"
        @closed="handleDrawerProcessClose"
      >
        <template #header>
          <div class="drawer-title" style="font-weight: 900; font-size: 25px; letter-spacing: 15px">
            申请进程
          </div>
        </template>
        <div class="drawer-content" style="display: flex">
          <div style="height: 700px; width: 20%">
            <el-steps direction="vertical" :active="processActive">
              <el-step title="职位申请" />
              <el-step title="面试" />
              <el-step title="是否入职" />
            </el-steps>
          </div>
          <!-- 1.职位申请状态 -->
          <div
            class="content"
            :class="{ refuse: processData.status == 1 }"
            style="width: 80%"
            v-if="processActive == 1"
          >
            <div class="item"><span class="label">申请人姓名</span> : {{ processData.name }}</div>
            <div class="item">
              <span class="label">申请时间</span> : {{ processData.applyTime }}
            </div>
            <div class="item"><span class="label">申请职位</span> : {{ processData.jobName }}</div>
          </div>
          <!-- 2.面试结果 -->
          <div class="content" style="width: 80%" v-if="processActive == 2">
            <el-alert
              title="注意"
              type="success"
              :description="`已经在${processData.resultTime}认为您符合岗位需求,等待企业人员联系以及安排面试`"
              show-icon
              style="margin-top: 20px; margin-bottom: 20px"
            />
            <div class="item"><span class="label">申请人姓名</span> : {{ processData.name }}</div>
            <div class="item">
              <span class="label">确认符合岗位需求时间</span> :
              {{ processData.resultTime }}
            </div>
            <div class="item">
              <span class="label">申请人联系电话</span> :
              {{ processData.phone }}
            </div>
            <div class="item" v-if="processData.status == 2">
              <span class="label" style="color: skyblue">等待企业人员填写面试信息。。。</span>
            </div>
            <div class="item" v-else-if="processData.status == 3">
              <span class="label">请确认面试信息</span>
              <el-form label-position="left" label-width="100">
                <el-form-item label="面试时间:">
                  <el-date-picker
                    v-model="processData.interviewTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width: 100%"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="面试官:">
                  <el-input
                    v-model="processData.interviewer"
                    placeholder="请输入面试官姓名"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="面试地址:" prop="interviewPlace">
                  <!-- 地址选择器 -->
                  <el-input :value="JSON.parse(processData.interviewPlace)" disabled> </el-input>
                </el-form-item>
                <el-form-item label="面试详细地址:" prop="interviewDetailPlace">
                  <el-input
                    v-model="processData.interviewDetailPlace"
                    placeholder="请输入详细地址"
                    :autosize="{ minRows: 2, maxRows: 7 }"
                    type="textarea"
                    disabled
                  />
                </el-form-item>
                <el-button @click="interviewCancel">取消</el-button>
                <el-button @click="interviewConfirm" type="primary" plain>确认</el-button>
              </el-form>
            </div>
            <div class="item" v-else-if="processData.status == 4">
              <span class="label">面试结果：</span>
              <el-text class="mx-1" type="info">等待面试结果...</el-text>
            </div>
          </div>
          <!-- 3.是否入职 -->
          <div class="content" style="width: 80%" v-if="processActive == 3">
            <el-alert
              title="注意"
              v-if="processData.status == 5"
              type="error"
              description="未通过面试"
              show-icon
              style="margin-top: 20px; margin-bottom: 20px"
            />
            <el-alert
              title="注意"
              v-if="processData.status == 6"
              type="success"
              description="已经通过面试，等待企业通知入职时间以及注意事项"
              show-icon
              style="margin-top: 20px; margin-bottom: 20px"
            />
            <div class="entry" v-if="processData.status == 7">
              <el-alert
                title="注意"
                type="success"
                description="通过面试，确认以下入职相关信息"
                show-icon
              />
              <el-form
                style="margin-top: 20px"
                :model="entryFormData"
                label-width="120px"
                label-position="left"
                :rules="entryFormDataRules"
                ref="entryRef"
              >
                <el-form-item label="入职时间：" prop="entryTime">
                  <el-date-picker
                    v-model="processData.entryTime"
                    type="datetime"
                    placeholder="选择入职时间"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="入职注意事项：" prop="entryDesc">
                  <el-input
                    type="textarea"
                    v-model="processData.entryDesc"
                    placeholder="请输入入职注意事项"
                    disabled
                    autosize
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.license-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;

  .user-content {
    width: 100%;
    padding: 10px 50px;
    text-align: left;
    overflow: auto;

    .demo-drawer {
      .drawer-content {
        .content-list {
          margin-bottom: 28px;

          span {
            font-size: 20px;
            font-weight: bold;
          }
        }

        .content {
          display: flex;
          flex-direction: column;
          width: 80%;
          // border: 1px solid #ccc;
          padding-left: 20px;

          .item {
            margin-top: 15px;

            .label {
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>
